<template>
	<div class="syslogin">
		<h3>系 统 登 陆</h3>
		<el-form :rules="rules" :model="loginData" ref="loginFrom">
			<el-form-item prop="username">
				<el-input prefix-icon="el-icon-user" v-model="loginData.username" size="small" placeholder="请填写用户名">
				</el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input prefix-icon="el-icon-lock" v-model="loginData.password" type="password" size="small"
					placeholder="请填写密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-checkbox v-model="rememberMe">记住密码</el-checkbox>
			</el-form-item>
			<el-button @click="submitLogin('loginFrom')" class="submitbun" type="primary" size="small">登 录</el-button>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: "Login",
		data: function() {
			return {
				rememberMe: true,
				loginData: {
					username: "root",
					password: "123"
				},
				rules: {
					username: [{
						required: true,
						message: "请输入用户名",
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: "请输入密码",
						trigger: "blur"
					}]
				}
			}
		},
		methods:{
			submitLogin:function(name){
				this.$refs[name].validate((valid)=>{
					if(valid){
						let user = {
							username:this.loginData.username
						};
						sessionStorage.setItem('loginer',this.$qs.stringify(user));
						this.$message.success('登录成功');
						this.$router.replace('/Home');
					} else{
						this.$message.warning('请正确输入信息');
						return false;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.syslogin {
		width: 380px;
		margin: 230px auto;
	}

	.syslogin h3 {
		text-align: center;
		color: #fff;
	}

	.submitbun {
		width: 100%;
	}
</style>
